<template>
	<view class="search">
		<view class="searchBox">
			<image class="icon" src="/static/images/group/search.png" mode=""></image>
			<input type="text" :value="search" @confirm="confirm" @input="input" class="inp" placeholder="请输入搜索内容" placeholder-class="placeholder" />
			<view class="btn" @click="confirm">搜索</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'search',
	props:{
		search:''
	},
	data() {
		return {
			value:null,
		};
	},
	methods:{
		input(e){
			this.value=e.detail.value;
		},
		confirm(){
			this.$emit('input',this.value)
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox {
	width: 558rpx;
	height: 60rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	position: relative;
	overflow: hidden;
	.icon{
		width: 18.88rpx;
		height: 18.37rpx;
		position: absolute;
		z-index: 2;
		bottom: 0;
		top: 0;
		margin: auto;
		left: $margin-width;
	}
	.inp{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		padding-left: 60rpx;
		font-size: $uni-font-size-12;
	}
	.placeholder{
		font-size: $uni-font-size-12;
		color: #DDDDDD;
	}
	.btn{
		width: 70rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: $uni-font-size-10;
		background: #1FC28B;
		border-radius: 20rpx;
		position: absolute;
		z-index: 2;
		bottom: 0;
		top: 0;
		margin: auto;
		right: $margin-width;
	}
}
</style>
